<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {{seo}}
    <title>{{$title}}</title>
    <meta name="keyword" content="{{$keyword}}" />
    <meta name="description" content="{{$describe}}" />
    {{/seo}}
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/reset.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/swiper_2.7.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/header.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/footer.css">
    <link rel="stylesheet" href="{{$static_path}}/static/css/dh/dh-dot.css">
    <link rel="stylesheet" href="{{$static_path}}/static/common/css/common.css">
    <script src="{{$static_path}}/static/common/js/jquery-1.11.3.js"></script>
</head>

<body>
    <!-- 头部部分 -->
    {{include file="header.tpl"}}
    <!-- 内容区域 -->
    <div class="dh-main">
        <div class="dh-banner"></div>
        <div class="main-content">
            <div class="main-left">
                <div class="dh-top1">
                    <p class="h-top">龙现东海</p>
                </div>
                <ul class="dh-list">
                    {{navigation parentid="2"}}
                        {{foreach $list as $k => $v}}
                            <li> <a href="{{$v['url']}}" {{if $get.category|in_array:$v['allchildurl']}}class="dh-acitve"{{/if}}>{{$v['name']}}</a></li>
                        {{/foreach}}
                    {{/navigation}}
                </ul>
            </div>
            <div class="main-right">
                {{crumbs url=$get.category}}
                <div class="right-txt-box">
                    <h1>东海网点</h1>
                    <div class="wz">
                        <span class="wz-span">您的位置：<a href="/">首页</a> > {{$crumbs}} </span>
                    </div>
                </div>
                {{/crumbs}}
                <div class="box-txt">
                    <ul class="cs-tabs">
                        <li class="cs-active">上海 </li>
                        <li>北京</li>
                        <li>重庆</li>
                        <li>江苏</li>
                        <li>广东</li>
                        <li>浙江</li>
                        <li>辽宁</li>
                        <li>山东</li>
                        <li>山西</li>
                        <li>福建</li>
                        <li>河南</li>
                        <li>贵州</li>
                        <li>湖北</li>
                    </ul>
                    <ul class="department-tabs">
                        <!-- <li class="department-active">东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司苏州营业部</li>
                        <li>东海期货有限责任公司南京营业部</li>
                        <li>东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司淮安营业部</li>
                        <li>东海期货有限责任公司南京营业部</li>
                        <li>东海期货有限责任公司扬州营业部</li>
                        <li>东海期货有限责任公司淮安营业部</li> -->
                    </ul>
                    <div class="tabs-map">
                        <div id="allmap"></div>
                        <div id="r-result"></div>
                    </div>
                    <div class="txt-map">
                        <!-- <p>东海期货有限责任公司常州营业部</p>
                        <p>电话：0519-88111456 </p>
                        <p>地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000) </p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--放一个id为footer的div,把footer.html加载到这块-->
    {{include file="footer.tpl"}}
    <!-- 底部部分 -->
</body>

<!-- 加载头尾 -->

<script src="{{$static_path}}/static/common/js/load.js"></script>
<script src="{{$static_path}}/static/common/js/swiper_2.7.js"></script>
<!-- 引入百度地图 -->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=mvguHmjvDsnfQGcStOTYGLN3l9gu1SDM"></script>
<!-- <script src="{{$static_path}}/static/js/dh-dot.js"></script> -->
<script>
// $(function(){
$('.cs-tabs>li').click(function () {
    $(this).addClass('cs-active').siblings().removeClass('cs-active')
    // 点击当前的下标
    var i = $(this).index()

    console.log(i)  //当前点击的下标传给后端
    $.ajax({
        type: 'GET',
        url: "",
        data: {
            data: i  //这是传给后端的数据
        },
        success: function (data) {
            //    console.log(data)
            //  var boxs =   data.data.boxs      // 模拟出来的数据

            //拿到数据渲染数据内容
            var html = '';
            $(".department-tabs").html('')
            $.each(boxs, function (k, v) {  // 这里的函数参数是键值对的形式，k代表键名，v代表值
                html += `<li>${boxs[k].txt}</li>`


            });
            // console.log(html)
            $(".department-tabs").append(html);
        },
        error: function () {

        }
    })
    // <ul class="department-tabs">
    //         <li class="department-active">东海期货有限责任公司扬州营业部</li>
    //         <li>东海期货有限责任公司苏州营业部</li>
    //         <li>东海期货有限责任公司南京营业部</li>
    //         <li>东海期货有限责任公司扬州营业部</li>
    //         <li>东海期货有限责任公司淮安营业部</li>
    //         <li>东海期货有限责任公司南京营业部</li>
    //         <li>东海期货有限责任公司扬州营业部</li>
    //         <li>东海期货有限责任公司淮安营业部</li>
    //     </ul>


})

// 默认一进来显示一次数据
function fns(boxs) {
    $.ajax({
        type: 'GET',
        url: "",
        data: {
        },
        success: function (data) {
            //    console.log(data)
            //  var boxs =   data.data.boxs      // 模拟出来的数据

            //拿到数据渲染数据内容
            var html = '';
            $(".department-tabs").html('')
            $.each(boxs, function (k, v) {  // 这里的函数参数是键值对的形式，k代表键名，v代表值
                html += `<li>${boxs[k].txt}</li>`


            });
            // console.log(html)
            $(".department-tabs").append(html);
        },
        error: function () {

        }
    })

}


var boxs = [
    {
        txt: '东海期货有限责任公司扬州营业部1'
    },
    {
        txt: '东海期货有限责任公司扬州营业部2',
    },
    {
        txt: '东海期货有限责任公司扬州营业部3'
    },
    {
        txt: '东海期货有限责任公司扬州营业部4'
    }
]
     fns(boxs)  //默认一进来显示的数据回调


// 模拟数据内容使用接口时候请删除
var dataMap = [
    {
        x: 121.398856,
        y: 31.199969,
        title1: "东海期货有限责任公司扬州营业部",
        title2: "上海水城南路营业部0000",
        title3: "上海水城南路营业部0000",
        title4: "上海水城南路营业部0000",
        txt3Box: {
            txt1: "东海期货有限责任公司常州营业部00000",
            txt2: "电话：0519-8811145600000",
            txt3: "地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000)0000"
        }
    },
    {
        x: 121.539722,
        y: 31.230112,
        title1: "东海期货有限责任公司苏州营业部2",
        title2: "上海水城南路营业部1111",
        title3: "上海水城南路营业部1111",
        title4: "上海水城南路营业部1111",
        txt3Box: {
            txt1: "东海期货有限责任公司常州营业部11111",
            txt2: "电话：0519-881114561111",
            txt3: "地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000)1111"
        }
    },
    {
        x: 121.482376,
        y: 31.278118,
        title1: "东海期货有限责任公司南京营业部3",
        title2: "上海水城南路营业部22222",
        title3: "上海水城南路营业部22222",
        title4: "上海水城南路营业部22222",
        // 这是底部标签的内容
        txt3Box: {
            txt1: "东海期货有限责任公司常州营业部22222",
            txt2: "电话：0519-8811145622222",
            txt3: "地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000)2222"
        }
    },
    {
        x: 121.398856,
        y: 31.199969,
        title1: "我是下标3333333",
        title2: "上海水城南路营业部222",
        title3: "上海水城南路营业部222",
        title4: "上海水城南路营业部2222",
        // 这是底部标签的内容
        txt3Box: {
            txt1: "东海期货有限责任公司常州营业部3333",
            txt2: "电话：0519-881114563333",
            txt3: "地址：常州新北区通江路河229号友邦商务大厦1幢15楼( 213000)3333"
        }
    }
]

// 营业部分的切换以及获取数据
// $('.department-tabs>li').each(function(){

// })




$(".department-tabs").on('click', 'li', function(){
    console.log($(this), '这是')
    $(this).addClass('department-active').siblings().removeClass('department-active')
    console.log($(this).index(), "下标");  //这是当前的下标做法一点击当前下标请求数据，把当前下标传给你，你把当前下标数据反给我
    var indexs = $(this).index()

    console.log($(this).index(), '44444');
    $.each(dataMap, function (v, m) {
        // console.log(indexs,'5555');
        // 判断循环当前下标是否点击这个有数据没有
        if (indexs == v) {
            var dataInfo = dataMap[v]
            dataMaps(dataInfo)
        }
    })
})




//地图提示样式
var content = `<div class='box-map'>
    <img style='float:left;margin:4px' id='imgDemo' src='{{$static_path}}/static/images/dh-dot/message-img1.png'/>
    <h1>东海期货有限责任公司常州营业部</h1>
    <p class='map-txt1'>统一社会信用代码：91320000678311769L</p>
    <p class='map-txt2'>设立时间：2008/7/14</p>
    <p class='map-txt3'>负责人：黄霄宏</p>
    </div></div>`
// 渲染数据内容
function dataMaps(dataInfo) {
    var txt3Box = dataInfo.txt3Box  //这是底部的数据内容

    //弹窗样式渲染
    content = `<div class='box-map'><img style='float:left;margin:4px' id='imgDemo' src='{{$static_path}}/static/images/dh-dot/message-img1.png'/><h1>${dataInfo.title1}</h1>
        <p class='map-txt1'>${dataInfo.title2} </p>
        <p class='map-txt2'>设立时间：${dataInfo.title3}</p>
        <p class='map-txt3'>负责人：${dataInfo.title4}</p>
        </div></div>`


    //底部样式渲染
    mapBox(dataInfo.x, dataInfo.y, content)
    $('.txt-map').html('')
    $('.txt-map').append(`<p>${txt3Box.txt1}</p>
                        <p>电话：${txt3Box.txt2} </p>
                        <p>地址：${txt3Box.txt3}</p>`)

}


// 百度地图功能代码
function mapBox(x, y, content) {
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(x, y);  //当前的经纬度
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 14);
    var opts = {
        width: 463,     // 信息窗口宽度
        height: 169,     // 信息窗口高度
        enableMessage: true,//设置允许信息窗发送短息
    }
    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
}
mapBox(119.967316, 31.782288, content) //默认显示常州地址内容
// })

</script>

</html>